<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="format-detection" content="telephone=no" />
    <title>TESCO移动商城-分类</title>

    <!-- 1. 引入重置样式表 -->
    <link rel="stylesheet" href="./css/normalize.css" />

    <!-- 2. 引入字体图标样式表 -->
    <link rel="stylesheet" href="./lib/font/iconfont.css" />

    <!-- 3. 引入公共样式表 -->
    <link rel="stylesheet" href="./css/common.css" />

    <!-- 4. 引入插件样式表 -->

    <!-- 5. 引入头部样式表 -->

    <!-- 6. 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/category.css" />

    <!-- 7. 引入页脚样式表 -->
    <link rel="stylesheet" href="./css/footer.css" />
  </head>

  <body class="flexDc jcsb mBody">
    <!-- 头部 -->
    <header class="flex aic fs16 bgff">
      <div class="back-index tac cba1">
        <i class="iconfont icon-left-arrow fs26"></i>
      </div>
      <div class="search-input flex1 flex rel">
        <i class="iconfont icon-search cc3 abs"></i>
        <input
          class="out-input flex1 on bsbb bgf7"
          type="text"
          placeholder="寻找你的宝贝"
        />
      </div>
      <div class="search bsbb"></div>
    </header>

    <!-- 主要内容 -->
    <main class="flex1 flex ofs">
      <ul class="aside ofs">
        <li><a class="dpb fs14 c00 tac active" href="#">热门推荐</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">手机数码</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">家用电器</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">电脑办公</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">计生情趣</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">美妆护肤</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">个护清洁</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">汽车生活</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">乐购超市</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">运动户外</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">图书音像</a></li>
        <li><a class="dpb fs14 c00 tac" href="#">酒水饮料</a></li>
      </ul>
      <ul class="category-content flex1 ofs bgff">
        <li>
          <h2 class="fs14">热卖分类</h2>
          <ul class="flex fww bsbb">
            <script>
              for (let i = 1; i < 10; i++) {
                document.write(`
                  <li class="flexDc aic">
                    <img src="./images/cagegory-img0${i}.png" alt="图片加载失败" />
                    <span class="fs14">手机</span>
                  </li>
                `);
              }
            </script>
            <li class="flexDc aic">
              <img src="./images/cagegory-img10.png" alt="图片加载失败" />
              <span class="fs14">手机</span>
            </li>
          </ul>
        </li>
        <li>
          <h2 class="fs14">电脑整机</h2>
          <ul class="flex fww bsbb">
            <script>
              for (let i = 1; i < 10; i++) {
                document.write(`
                  <li class="flexDc aic">
                    <img src="./images/cagegory-img0${i}.png" alt="图片加载失败" />
                    <span class="fs14">手机</span>
                  </li>
                `);
              }
            </script>
          </ul>
        </li>
        <li>
          <h2 class="fs14">外设产品</h2>
          <ul class="flex fww bsbb">
            <script>
              for (let i = 1; i < 10; i++) {
                document.write(`
                  <li class="flexDc aic">
                    <img src="./images/cagegory-img0${i}.png" alt="图片加载失败" />
                    <span class="fs14">手机</span>
                  </li>
                `);
              }
            </script>
          </ul>
        </li>
      </ul>
    </main>

    <!-- 页脚 -->
    <footer class="flex c8b">
      <a class="flex1 flexDc aic c8b" href="./index.html">
        <i class="iconfont icon-index fs20"></i>
        <span>首页</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./category.html">
        <i class="iconfont icon-classification fs20"></i>
        <span>分类</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./shopCar.html">
        <i class="iconfont icon-shop-car fs20"></i>
        <span>购物车</span>
      </a>
      <a class="flex1 flexDc aic c8b" href="./my.html">
        <i class="iconfont icon-my fs20"></i>
        <span>我的</span>
      </a>
    </footer>

    <!-- 页面特效部分 -->

    <!-- 引入jQuery -->
    <script src="./js/jquery-3.7.1.min.js"></script>

    <!-- 引入validate -->
    <script src="./js/jquery.validate.js"></script>

    <!-- 引入插件 -->

    <!-- 引入公共js -->
    <script src="./js/common.js"></script>

    <!-- 引入当前页js -->
    <script src="./js/category.js"></script>
  </body>
</html>
